<template>
    <div class="container">
        <el-card shadow="always" :body-style="{ padding: '40px!important' }" style="margin-top: 10px;">
        <div class="app-info">
            <div class="info-left">
                <img :src="appInfo.applyLogo" alt="">
            </div>
            <div class="info-right">
                <div class="app-tite">{{ appInfo.applyName }}</div>
                <div class="app-des">{{ appInfo.applyDescription }}</div>
                <div class="app-bottom">
                    <div class="buy-btn" @click="submit">购买</div>
                </div>
            </div>
        </div>
        </el-card>
        <el-card v-if="appInfo.applyDetails" shadow="always" :body-style="{ padding: '40px!important' }" style="margin-top: 10px;">
            <div class="app-detail" >
                <div v-html="appInfo.applyDetails"></div>
            </div>
        </el-card>
    </div>
</template>

<script setup name="buy" lang="ts">
import apply from '@/api/system/apply';
import applyBuyRecord from '@/api/system/applyBuyRecord';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const appInfo = ref({
    applyName: '',
    applyLogo: '',
    applyDescription: '',
    applyDetails: ''
})
const getDetail = async () => {
    const { data } = await apply.get(proxy.$route.query.id + '')
    appInfo.value = data
}
const submit = () => {
    const params = {
        applyId: proxy.$route.query.id + '',
        qty:1,
        qtyType:'3'
    }
    proxy.$modal.confirm('是否购买该应用?').then(() => {
        applyBuyRecord.add(params).then(() => {
            proxy.$modal.msgSuccess('购买成功')
        })
    }).catch(() => {
        proxy.$modal.msgError('已取消购买')
    });
}
onMounted(() => {
    getDetail()
})
</script>

<style lang="scss" scoped>
.container{
    
    width: 1200px;
    margin: 0 auto;
    padding:0 30px;
}
.app-info{
    display: flex;
    margin-bottom: 20px;
    .info-left{
        width: 200px;
        height: 200px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .info-right{
        flex: 1;
        padding-left: 20px;
        position: relative;
        .app-tite{
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .app-des{
            font-size: 14px;
            color: #606266;
            margin-bottom: 10px;
            // 4行超出显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;

        }
        .app-bottom{
            position: absolute;
            bottom: 0;
            right: 0;
            .buy-btn{
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #F1795F;
                color: #fff;
                border-radius: 4px;
                cursor: pointer;
                float: right;
                margin-top: 20px;
            }
        }
    }
}
</style>